<template>
	<view class="examination">
		<view style="height: 25px; width: 750rpx; background-color:transparent;"></view>
		<my-title :title="title" :iSshow="iSshow" @back="back"></my-title>
		<view class="exam_body">
			<view class="list_item">
				<text>考试名称：</text>
				<text class="item">{{paperDetail.examName}}</text>
			</view>
			<view class="list_item">
				<text>考试时长：</text>
				<text class="item">{{paperDetail.duration}} 分钟</text>
			</view>
			<!-- <view class="list_item">
		  		<text>考试开始时间：</text>
		  		<text class="item">{{paperDetail.startTime}}</text>
		  	</view> -->
			<view class="list_item">
				<text>每题分数：</text>
				<text class="item">{{paperDetail.scorePerQuestion}}</text>
			</view>
			<view class="list_item">
				<text>截止时间：</text>
				<text class="item">{{paperDetail.endTime}}</text>
			</view>
		</view>
		<view class="loginbtn" @click="open">
			<text>开始考试</text>
		</view>
		
		<uni-popup ref="popup" :mask-click="false">
			<view>
				<view class="checkchoices" style="border-radius: 10px 10px 0px 0px">
					是否开始考试?
				</view>
				<view style=" width: 300px;">
					<button
						style="width: 150px; float: left; border-radius: 0px 0px 0px 10px; color: black; background-color: #F0EFEF;"
						@click="close">取消</button>
					<button
						style="width: 150px;  float: left; border-radius: 0px 0px 10px 0px;  background-color: #3C86FD; color: white; "
						@click="ExamStart">确定</button>
		
				</view>
		
			</view>
		
		</uni-popup>
	</view>
</template>

<script>
	import myTitle from '../../components/title.vue'
	export default {
		data() {
			return {
				iSshow: false,
				name: 123,
				endTime: null,
				paperDetail: {},
				title: '考试'
			}
		},
		components: {
			myTitle
		},
		methods: {
			ExamStart() {
				
				if (!uni.getStorageSync('endTime')) {
					
					this.endTime = +new Date() + parseInt(this.paperDetail.duration) * 60000 //3600000
					console.log(this.paperDetail)
					uni.setStorageSync(
						'endTime',
						this.endTime
					)
					uni.removeStorageSync('selectData')
					uni.removeStorageSync('onlySelectData')
				}
				uni.navigateTo({
					url: 'examlist/matter?id=' + this.paperDetail.id
				})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			back() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}

		},
		onLoad() {
			this.paperDetail = JSON.parse(uni.getStorageSync('paperDetail'))
			console.log(this.paperDetail)
			if (!this.paperDetail) {
				uni.navigateTo({
					url: '../index/index'
				})
				return;
			}
		}
	}
</script>

<style>
	
	.checkchoices {
		background-color: white;
		margin: 0 auto;
		width: 300px;
		height: 100px;
		text-align: center;
		line-height: 120px;
	}
	
	.examination {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.header {
		width: 100%;
		position: relative;
		height: 50px;
		/* border: 1px solid black; */
	}

	.header image {
		display: block;
		width: 50px;
		height: 100%;
		margin: 20px auto;
	}

	.loginbtn {
		position: absolute;
		width: 80%;
		height: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #3C86FD;
		border-radius: 5px;
		display: flex;
		margin: 0 auto;
		justify-content: center;
		align-items: center;
		top: 800rpx;
	}

	.loginbtn text {
		display: block;
		color: white;
		/* font-weight: bolder; */
		font-size: 18px;
		line-height: 100%;
	}

	.exam_body {
		position: absolute;
		width: 560rpx;
		height: 400rpx;
		left: 50%;
		margin-top: 80rpx;
		line-height: 120rpx;
		transform: translateX(-50%);

		.list_item {}
	}
</style>
